<template>
  <div>
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-form :model="form" ref="form" label-width="80px" inline size="small">
        <el-form-item label="代理商名称" prop="agent_name">
          <el-select v-model="form.agent_name" placeholder="全部">
            <el-option v-for="item in options"
              :key="item.agent_num"
              :label="item.agent_name"
              :value="item.agent_num">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="代理商编号" prop="agent_num">
          <el-input v-model="form.agent_num" placeholder="全部"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone" placeholder="全部" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="handleClickSearch" icon="el-icon-search" size="small">搜索</el-button>
          <el-button type="info" @click="handleClickReset" icon="el-icon-delete" size="small">清除</el-button>
        </el-form-item>
      </el-form>
      
    </el-row>
    <el-row>
      <el-table :data="date" size="small" :header-cell-style="{background:'#f2f2f2'}">
        <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
        <el-table-column v-for="col in columns"
          :prop="col.id"
          :key="col.id"
          align="center"
          :label="col.label">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClickCheck(scope.row.agent_num)">审核资料</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-size="page.size"
        layout="total, prev, pager, next, jumper"
        :total="page.total"
        class="mt20 fr">
      </el-pagination>
      
    </el-row>
    <el-dialog title="审核资料" width="500px" :visible.sync="dialog">
      <el-form :model="model" ref="model" label-width="100px">
        <el-form-item class="mb0" label="银行卡号：" required>
          <span class="fz12">{{ model.bank_num }}</span>
        </el-form-item>
        <el-form-item class="mb0" label="户名：" required>
          <span class="fz12">{{ model.bank_name }}</span>
        </el-form-item>
        <el-form-item class="mb0" label="开户行：" required>
          <span class="fz12">{{ model.bank_code_name }}</span>
        </el-form-item>
        <el-form-item class="mb0" label="开户支行：" required>
          <span class="fz12">{{ model.bank_branch_name }}</span>
        </el-form-item>
        <el-form-item label="证件照片：" required>
          <el-tooltip content="身份证正面" placement="bottom" effect="dark">
            <img @click="handleClickZoomImg(model.posphoto)" style="border-radius: 3px;margin-right: 3px;vertical-align: top;" :src="model.posphoto" alt="" width="80" height="80">
          </el-tooltip>
          <el-tooltip content="身份证反面" placement="bottom" effect="dark">
            <img @click="handleClickZoomImg(model.sidephoto)" style="border-radius: 3px;margin-right: 3px;vertical-align: top;" :src="model.sidephoto" alt="" width="80" height="80">
          </el-tooltip>
          <el-tooltip content="手持身份证" placement="bottom" effect="dark">
            <img @click="handleClickZoomImg(model.handheld)" style="border-radius: 3px;margin-right: 3px;vertical-align: top;" :src="model.handheld" alt="" width="80" height="80">
          </el-tooltip>
          <el-tooltip content="银行卡正面" placement="bottom" effect="dark">
            <img @click="handleClickZoomImg(model.bankphoto)" style="border-radius: 3px;margin-right: 3px;vertical-align: top;" :src="model.bankphoto" alt="" width="80" height="80">
          </el-tooltip>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="small" type="danger" @click="handleClickRejectStatus(-100)">不通过</el-button>
        <el-button size="small" type="primary" @click="handleClickSuccess(200)">审核通过</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { validAgentInit, GetValidGread, validAgentSearch, validAgentSubmit, validAgentPage, validAgentName, validAgentList } from '@/api/myAngent'

export default {
  name: 'validAgent',
  components: {
    Breadcrumb
  },
  data() {
    return {
      dialog: false,
      form: {
        agent_name: '',
        agent_num: '',
        phone: ''
      },
      model: {
        agent_num: '',
        bank_num: '',
        bank_name: '',
        bank_code_name: '',
        bank_branch_name: '',
        posphoto: '',
        sidephoto: '',
        handheld: '',
        bankphoto: ''
      },
      page: {
        size: 1,
        total: 10,
        current: 1
      },
      columns: [
        { id: 'agent_num', label: '代理商编号' },
        { id: 'agent_name', label: '代理商名称' },
        { id: 'respo_name', label: '负责人' },
        { id: 'telphone', label: '电话' },
        { id: 'start_time', label: '开通时间' }
      ],
      options: [],
      date: []
    }
  },
  methods: {
    handleGreadInit() {
      GetValidGread().then(res => {
        if (res.data.errorCode === 0) {
          this.$store.dispatch('addStatus', res.data.result)
        } else {
          this.$store.dispatch('addStatus', 0)
        }
      })
    },
    handleClickSearch() {
      validAgentSearch(this.form).then(res => {
        if (res.data.errorCode === 0) {
          this.date = res.data.result.data
          this.page.size = res.data.result.per_page
          this.page.current = res.data.result.current_page
          this.page.total = res.data.result.total
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleCurrentChange(v) {
      validAgentPage(this.form, v).then(res => {
        if (res.data.errorCode === 0) {
          this.date = res.data.result.data
          this.page.size = res.data.result.per_page
          this.page.current = res.data.result.current_page
          this.page.total = res.data.result.total
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleClickCheck(agent_num) {
      validAgentList(agent_num).then(res => {
        if (res.data.errorCode === 0) {
          this.dialog = true
          this.model.agent_num = res.data.result.agent_num
          this.model.bank_num = res.data.result.bank_account_no
          this.model.bank_name = res.data.result.bank_accout_name
          this.model.bank_code_name = res.data.result.deposit_bank.name
          this.model.bank_branch_name = res.data.result.sub_bank.name
          this.model.posphoto = res.data.result.photos.posphoto
          this.model.sidephoto = res.data.result.photos.sidephoto
          this.model.handheld = res.data.result.photos.handheld
          this.model.bankphoto = res.data.result.photos.bankphoto
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleClickZoomImg(url) {
      this.$alert(`<img width="100%" heigth="100%" src= ${url}></img>`, {
        dangerouslyUseHTMLString: true,
        center: true,
        showConfirmButton: false,
        closeOnClickModal: true,
        closeOnPressEscape: true
      }).then(() => {
        return false
      }).catch(() => {
        return false
      })
    },
    handleClickSuccess(type) {
      validAgentSubmit(this.model.agent_num, type).then(res => {
        if (res.data.errorCode === 0) {
          this.$message.success('操作成功')
          this.dialog = false
          this.handleCurrentChange(this.page.current)
          this.handleGreadInit()
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleClickRejectStatus(type) {
      this.$msgbox({
        title: '拒绝原因',
        showInput: true,
        inputType: 'textarea',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true
      }).then(({ value }) => {
        validAgentSubmit(this.model.agent_num, type, value).then(res => {
          if (res.data.errorCode === 0) {
            this.$message.success('操作成功')
            this.dialog = false
            this.handleCurrentChange(this.page.current)
            this.handleGreadInit()
          } else {
            this.$message.error(res.data.errorMsg)
          }
        })
      }).catch(() => {
        return false
      })
    },
    handleClickReset() {
      this.$refs['form'].resetFields()
      validAgentInit().then(res => {
        if (res.data.errorCode === 0) {
          this.date = res.data.result.data
          this.page.size = res.data.result.per_page
          this.page.current = res.data.result.current_page
          this.page.total = res.data.result.total
        }
      })
    }
  },
  created() {
    this.handleGreadInit()
    validAgentInit().then(res => {
      if (res.data.errorCode === 0) {
        this.date = res.data.result.data
        this.page.size = res.data.result.per_page
        this.page.current = res.data.result.current_page
        this.page.total = res.data.result.total
      }
    })
    validAgentName().then(res => {
      if (res.data.errorCode === 0) {
        this.options = res.data.result
      } else {
        this.$message.error(res.data.errorMsg)
      }
    })
  }
}
</script>